<template>
	<view>
		<!-- <view class="search"><u-search placeholder="关键字搜索" v-model="keyword" :show-action="false" :disabled="true" @click="$to('/pages/article/list')" bg-color="#F6F6F6"></u-search></view> -->
		<view class="content">
			<view class="head_swiper"><u-swiper :list="swiper_list" mode="rect" indicator-pos="bottomCenter"></u-swiper></view>
			<view class="fast_track">
				<view class="list">
					<view class="item" v-for="(item, index) in fast_list" :key="index" v-if="isShow(index)" @click="$to(item.url)">
						<view class="img_view" :class="'class' + index"><image :src="item.img" mode="widthFix" class="img"></image></view>
						<span>{{ item.title }}</span>
					</view>
				</view>
			</view>
			<view class="article">
				<view class="public_head">
					<span class="title">最近更新</span>
					<span class="all" @click="$to('/pages/article/list')">查看更多</span>
				</view>
				<view class="article_list">
					<view class="item" v-for="(item, index) in article_list" :key="index" @click="$to('/pages/article/article?id=' + item.id)">
						<view class="left">
							<u-avatar class="img" mode="square" :src="item.outimg" :show-sex="item.anonymous == 1 ? true : false" :sex-icon="item.gender == 0 ? 'man' : 'woman'"></u-avatar>
						</view>
						<view class="center">
							<view class="top">
								<view class="wall" v-if="!$status" :style="{ backgroundColor: item.wall_color || '#ee5253' }">{{ item.wall_title }}</view>
								<view class="title">{{ item.title }}</view>
							</view>
							<view class="tag">
								<view class="name">{{ item.name }}</view>
								<view class="date"><uni-dateformat format="MM/dd hh:mm:ss" :threshold="[600000, 3600000]" :date="item.create_time"></uni-dateformat></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-tabbar height="110rpx" v-model="current" :list="tabbar.list" :active-color="tabbar.active_color" :inactive-color="tabbar.inactive_color"></u-tabbar>
	</view>
</template>

<script>
import { article_lsit, open_code } from '@/api/index.js';
import tabbar from '@/tabbar.js';

export default {
	data() {
		return {
			share: {
				title: '武信校园墙'
			},
			current: 0,
			tabbar: tabbar,
			token: null,
			swiper_list: [],
			fast_list: [
				{
					title: '学校信息',
					img: require('@/static/img/school.png'),
					url: '/pages/school_info/school_info'
				},
				{
					title: '墙墙说明',
					img: require('@/static/img/td.png'),
					url: '/pages/school_info/about'
				},
				{
					title: '信息反馈',
					img: require('@/static/img/fk.png'),
					url: '/pages/feedback/feedback'
				},
				{
					title: '墙友拍',
					img: require('@/static/img/pz.png'),
					url: '/pages/shoot/shoot'
				}
			],
			article_list: []
		};
	},
	onHide() {
		
	},
	onShow() {
		this.token = uni.getStorageSync('token');
		
	},
	onPullDownRefresh() {
		//下拉刷新
		this.getList();
		this.getInfo();
	},
	onLoad() {
		this.getInfo();
		this.getList();
		uni.$on('update_user_info', () => {
			this.getInfo();
			this.getList();
		});
		
	},
	onUnload(){
		//页面 卸载
		socket.close();//关闭连接
		console.log("页面卸载");
	},
	methods: {
		isShow(index){
			if(index == 2){
				if(this.$status){
					return false
				}else{
					return true
				}
			}else{
				return true
			}
		},
		getInfo() {
			open_code('lunbo').then(res => {
				console.log(res, '获取轮播图');
				this.swiper_list = res.data.map(item => item.content);
			});
		},
		getList() {
			article_lsit({
				limit: 15
			}).then(res => {
				console.log(res, '获取的数据');
				this.article_list = res.data.data;
				uni.stopPullDownRefresh(); //关闭下拉刷新
			});
		}
	}
};
</script>
<style>
page {
	background-color: #f8f8f8;
}
</style>
<style lang="scss" scoped>
.content {
	position: relative;
	margin: auto;
	width: 700rpx;

	.head_swiper {
		margin: 20rpx 0;
	}

	.fast_track {
		background-color: #fff;
		border-radius: 15rpx;
		margin-bottom: 25rpx;

		.list {
			display: flex;
			flex-wrap: wrap;
			padding: 25rpx 0;
			justify-content: space-around;
			.item {
				width: 25%;
				text-align: center;
				display: flex;
				flex-direction: column;

				.img_view {
					width: 100rpx;
					height: 100rpx;
					margin: auto;
					display: flex;
					border-radius: 50%;

					&.class0 {
						background: linear-gradient(#00a8ff, #0097e6);
					}

					&.class1 {
						background: linear-gradient(#e74c3c, #d63031);
					}

					&.class2 {
						background: linear-gradient(#7bed9f, #2ed573);
					}

					&.class3 {
						background: linear-gradient(#fed330, #ffa801);
					}
					
					&.class4 {
						background: linear-gradient(#34e7e4, #00d8d6);
					}
					.img {
						width: 60rpx;
						height: auto;
						margin: auto;
					}
				}

				span {
					padding-top: 20rpx;
				}
			}
		}
	}

	.article {
		background-color: #fff;
		border-radius: 15rpx;
		margin-bottom: 25rpx;
		.article_list {
			padding: 0 10rpx 10rpx;
			//文章列表
			.item {
				display: flex;
				padding: 20rpx;

				.left {
					font-size: 0;

					.img {
						width: 80rpx;
						height: 80rpx;
						border-radius: 5rpx;
					}
				}

				.center {
					flex: 1;
					display: flex;
					padding-left: 20rpx;
					flex-direction: column;
					justify-content: space-between;
					overflow: hidden;
					.top {
						display: flex;
						.title {
							font-size: 32rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							color: #000;
						}
						.wall {
							margin: auto 10rpx auto 0;
							border-radius: 10rpx;
							color: #fff;
							padding: 4rpx 10rpx;
							font-size: 25rpx;
							display: table;
							white-space: nowrap;
						}
					}

					.tag {
						display: flex;
						.name {
							font-size: 24rpx;
							color: #a4a4a4;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.date {
							margin-left: auto;
							white-space: nowrap;
							color: #a4a4a4;
							font-size: 22rpx;
						}
					}
				}
			}
		}
	}
}
</style>
